<template>
  <div class="chat-container">

    <div class="chat-sidebar">
      <ul class="chat-nav">
        <li>比如你可以提出这些问题：</li>
        <li class="no-bullets">北京有哪些非物质文化遗产？</li>
      </ul>
    </div>

    <div class="chat-window">
        <div class="chat-header">
          <p class="title">这里是智能问答系统，你可以向我提出问题</p>
        </div>

        <div class="chat-messages">
          <!-- 聊天消息列表 -->
          <div class="message" v-for="(msg, index) in messages" :key="index">
            <div class="message-content">
              <p>{{ msg.text }}</p>
            </div>
          </div>
        <!-- ...其他消息 -->
        </div>
        <div class="chat-input">
          <textarea placeholder="输入你想要询问的问题..." v-model="message" @keyup.enter="sendMessage"></textarea>
          <button @click="sendMessage">发送</button>
        </div>
     
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: [],
    };
  },
  methods: {
    sendMessage() {
      if (this.message.trim() !== '') {
        this.messages.push({
          text: this.message,
        });
        
        const data={
          "question": this.message
        }
        this.$api.qa.getanswer(data).then((response) => {
          this.messages.push({
            text: response.data.answer,
        });
        })
        this.message = '';
      }
    },
  },
};
</script>

<style scoped>
.no-bullets{
  font-size:1em;
}
.title{
  font-size:2vh;
}
.chat-container {
  display: flex;
  width: 100%;
  height: 100vh; /* 占据整个视口高度 */
}

.chat-sidebar {
  margin-top: 5vh;
  width: 23%;
  background-color: #F1EDE6; /* 示例背景色 */
  padding: 1em;
  box-sizing: border-box;
  .no-bullets {
    list-style-type: none;
    /* 还可以添加一些额外的样式来美化列表项 */
    padding-left: 0; /* 去掉列表左侧的默认填充 */
  }
  .chat-nav{
    font-size: 1.2vw;
    line-height:1.5;
  }
}

.chat-window {
  margin-top:5vh;
  width: 80%;
  
  background-image: url("../../assets/qa/back.png"); /* 替换为你的背景图片路径 */
  background-attachment: fixed;
  background-size: center;
  background-position: 20vw 25vh;
  background-repeat: no-repeat;

  padding: 1em;
  box-sizing: border-box;
}

.chat-header {
  /* 聊天窗口的标题样式 */
  padding: 0.5em;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  border-bottom: 0.1em solid #ccc;
  .title{
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;

  }
}

.chat-messages {
  /* 聊天消息列表的样式 */
  height: calc(100% - 1em); /* 减去标题和输入框的高度 */
  overflow-y: auto; /* 垂直滚动 */
  padding: 1em;
  box-sizing: border-box;
  .message-content{
    font-size: 1em;
  }
}

.message {
  /* 单条消息的样式 */
 /* margin-bottom: 10px;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.9); !* 半透明白色背景 *!
  border-radius: 5px;*/
  margin-bottom: 1em;
  padding: 0.2em 0.3em;
  background-color: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
  border-radius: 1vw; /* 使用vw作为圆角大小单位 */
  width: 80%;
  height:3em;
}

.chat-input {
  /* 输入框和发送按钮的样式 */
  position: sticky;
  bottom: 0;
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 12vh;
}

.chat-input textarea {
 /* flex: 1;
  resize: none;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 25px;*/
  flex: 1;
  resize: none;
  padding: 0.5vw;
  border-radius: 1vw; /* 使用vw作为圆角大小单位 */
  border: 0.1vw solid #ccc; /* 使用vw作为边框宽度单位 */
  font-size: 1.5vw; /* 使用vw作为字体大小单位 */
  height: 5vh;
}

.chat-input button {
  /*margin-left: 10px;
  padding: 10px 10px;
  border-radius: 5px;
  border: 4px solid saddlebrown;
  background-color: #F1EDE6;*/
  margin-left: 1vw;
  padding: 1vw 1vw;
  border-radius: 1vw; /* 使用vw作为圆角大小单位 */
  border: 0.2vw solid saddlebrown; /* 使用vw作为边框宽度单位 */
  background-color: #F1EDE6;
  height: 5vh;
  line-height: 1vh;
}
</style>
